<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer"/>

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar>
          Lq-Music
        </q-toolbar-title>

        <q-space/>
        <q-avatar color="teal" text-color="white">{{ nicknameFirstWord }}
        <q-menu fit>
          <q-list style="min-width: 100px">
            <q-item clickable v-close-popup @click="logout">
              <q-item-section>退出</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
        </q-avatar>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
      <q-list padding class="text-primary">
        <q-item
            clickable
            v-ripple
            active-class="menu-active text-white"
            v-for="item in menuRoutes"
            :key="item.meta.title"
            :active="item.name === route.name"
            :to="item.path"
        >
          <q-item-section avatar>
            <q-icon :name="item.meta.icon"/>
          </q-item-section>

          <q-item-section>{{ item.meta.title }}</q-item-section>
        </q-item>

      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>

  </q-layout>
</template>

<script>
import {computed, ref} from 'vue'
import {useStore} from "vuex"
import {useRoute} from "vue-router";
import {menuRoutes} from "../router";

export default {
  name: "Layout",
  setup() {
    const leftDrawerOpen = ref(false);

    const store = useStore();

    const route = useRoute();

    return {
      nicknameFirstWord: computed(
          () => store.getters['user/nicknameFirstWord']
      ),
      leftDrawerOpen,
      toggleLeftDrawer() {
        leftDrawerOpen.value = !leftDrawerOpen.value
      },
      menuRoutes,
      route,
      logout: () => store.dispatch('user/logout').then(() => window.location.reload())
    }
  }
}
</script>

<style lang="sass">
.menu-active
  color: white !important
  background: #F2C037
</style>
